import React from 'react';
import ReactEcharts from "echarts-for-react";

interface FlowDiagramProps {
    nodes?,
    links?,
}

export const FlowDiagramCharts = (props:FlowDiagramProps) => {
    if(!props.nodes||!props.links){
        return null;
    }
    return (
        <ReactEcharts
            option={
                {
                    tooltip: {
                        trigger: 'item',
                        triggerOn: 'mousemove'
                    },
                    series: [
                        {
                            type: 'sankey',
                            data: props.nodes,
                            links: props.links,
                            layoutIterations:0,
                            focusNodeAdjacency: true,
                            label: {
                                //fontSize: 16,
                                //lineHeight: 20,
                                formatter: params => {
                                    return params.data.name + '：' + params.data.value;
                                }
                            },
                            levels: [{
                                depth: 0,
                                itemStyle: {
                                    color: '#fbb4ae'
                                },
                                lineStyle: {
                                    color: 'source',
                                    opacity: 0.6
                                }
                            }, {
                                depth: 1,
                                itemStyle: {
                                    color: '#b3cde3'
                                },
                                lineStyle: {
                                    color: 'source',
                                    opacity: 0.6
                                }
                            }, {
                                depth: 2,
                                itemStyle: {
                                    color: '#ccebc5'
                                },
                                lineStyle: {
                                    color: 'source',
                                    opacity: 0.6
                                }
                            }, {
                                depth: 3,
                                itemStyle: {
                                    color: '#decbe4'
                                },
                                lineStyle: {
                                    color: 'source',
                                    opacity: 0.6
                                }
                            }],
                            lineStyle: {
                                curveness: 0.5
                            }
                        }
                    ]
                }
            }
            style={{ height: '100%' }}
            theme="clear"
            notMerge={true}
            lazyUpdate={true}
        />

    );
}